<template>
  <div>
    <!-- <div class="orderNum">
      <label>{{getData.dispatch_no}}</label>
      <label class="orderState">{{orderState}}</label>
    </div> -->
    <div class="costHeader">
      <!-- <div class="site_wrap">
        <div class="left">
          {{getData.shipper_city}}
        </div>
        <div class="center">
          <div class="customer_name">{{getData.customer_name}}</div>
          <img class="bar" src="../../../../static/images/icon/flow_to.png" />
          <div class="require_time_to">{{getData.require_time_to}}</div>
        </div>
        <div class="right">
          {{getData.consignee_city}}
        </div>
      </div> -->

      <label style="color: #fff;display: inline-block;
      padding: 0 0 0.4rem 0;">{{now}}</label>
      <div class="typeAmount">
        <span style="border-right: 1px solid #ccc">
          <label>{{getData.plan_amount}}T</label>
          <label class="tyeStr">计划量</label>
        </span>
        <span style="border-right: 1px solid #ccc;width:3.307remF">
          <label v-if="getData.load_amount  == 0 || !getData.load_amount ">待装</label>
          <label v-else>{{getData.load_amount}}T</label>
         
          <label class="tyeStr">装货量</label>
        </span>
        <span>
          <label v-if="getData.unload_amount  == 0 || !getData.unload_amount ">待卸</label>
          <label v-else>{{getData.unload_amount}}T</label>
         
          <label class="tyeStr" >卸载量</label>
        </span>
      </div>
    </div>
    <div class="costContainer">
      <div class="costListDiv">
        <div v-for="(item1,index1) in feeGroup" :key='index1'>
          <div class="costList">
            <div class="containerLeft" @click='seeDetailCost(item1.ds_code)'>{{item1.ds_value}}</div>
            <div class="containerright">
              <label>已报：{{item1.sum_total_amount || 0}}</label>
              <label>已审：{{item1.sum_confirm_amount || 0}}</label>
            </div>
            <!-- <div class="containerright"  v-else>
              <label>已报：{{ 0}}</label>
              <label>已审：{{ 0}}</label>
            </div> -->
          </div>
        </div>
      </div>

    </div>

    <div class="costListFoot">
      <div class="allCostTitle" @click='seeDetailCost("")'>费用汇总</div>
      <div class="allCostNumber">
        <label class="a">总费用：{{totalCost || 0}}</label>
        <span class="costIcon"></span>
        <label class="b">总审核金额：{{totalConfirmAmount || 0}}</label>
      </div>
    </div>
    <!-- <div class="toOtherBtn">
      <router-link to="/operations" class="toOpera">业务操作</router-link>
      <router-link to="" class="toCost">费用登记</router-link>
    </div> -->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        fee_names: [], //费用名称缓存
        feeGroup: [], //派车单费用分组
        totalCost: '', //总费用
        totalConfirmAmount: 0, //总深恶金额
        amountType: {
          plan: '',
          load: '',
          unload: '',
        },
        getData: {}, //上个页面传过来的数据
        now: new Date().Format("yyyy-MM-dd hh:mm:ss"),
        orderState: '', //订单状态
      }
    },

    mounted() {
      // .dispatch_no,item.company_id,item.plan_amount,item.load_amount,item.unload_amount,item.customer_name,item.dispatch_status
      this.$api.BackTop();
      this.fee_names = JSON.parse(sessionStorage.getItem('loginData')).feeNames;
      this.init();
    },
    methods: {
      //查询单个费用信息
      seeDetailCost(group) {
        let parms = {
          page_no: 1,
          page_size: 10,
          dispatch_no: this.getData.dispatch_no,
          balance_code: this.getData.balance_code,
          company_id: this.getData.company_id,
          name: this.getData.name,
          totalCost: this.totalCost,
          totalConfirmAmount: this.totalConfirmAmount
        }
        if(group)parms.fee_group=group;  
        sessionStorage.setItem('detailCost', JSON.stringify(parms));
        this.$router.push({
          path: '/recodeCost'
        })
      },
      //初始化信息
      init() {
        let nine = {

        }
        this.getData = JSON.parse(sessionStorage.getItem('cost'));
        let that = this;

        if (this.getData.dispatch_status == 20) {
          this.orderState = '已审核'
        } else if (this.getData.dispatch_status == 30) {
          this.orderState = '已发车'
        } else if (this.getData.dispatch_status == 35) {
          this.orderState = '已到厂'
        } else if (this.getData.dispatch_status == 40) {
          this.orderState = '已装货'
        } else if (this.getData.dispatch_status == 45) {
          this.orderState = '已抵达'
        } else if (this.getData.dispatch_status == 50) {
          this.orderState = '已卸货'
        } else if (this.getData.dispatch_status == 60) {
          this.orderState = '完成'
        }

        let params = {
          dispatch_no: this.getData.dispatch_no,
          balance_code: JSON.parse(sessionStorage.getItem('loginData')).driver_code,
          company_id: this.getData.company_id
        }
        this.$api.post('/wechat/getFeeGroup', params, function (data) {
          that.feeGroup = data.obj.feeGroup;
          that.totalCost = data.obj.totalCost;
          let allConfirmAmount = 0;
          that.feeGroup.forEach(element => {
            allConfirmAmount += parseInt(element.sum_confirm_amount);
          });
          that.totalConfirmAmount = allConfirmAmount;
        }, function (error) {
          alert(error.msg)
        })
      }
    }
  }

</script>
<style scoped>
  .costHeader {
    background: #3B8CE7;
  }

  .typeAmount {
    display: flex;
    justify-content: space-between;
    margin: 0 .4rem;
    padding: .1rem 0rem;
    background: #fff;
    border-radius: .107rem .107rem 0 0;
  }

  .typeAmount span {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    width: 2.95rem;
  }

  .tyeStr {
    color: #808080;
  }

  .costContainer {
    display: flex;
    display: -webkit-flex;
    padding: 0 .4rem
  }


  .costList {
    display: flex;
    border: 2px solid #3B8CE7;
    border-radius: .107rem;
    margin-top: 0.2rem;
    width: 100%;
  }

  .containerright {
    background: #fff;
    height: 1.40625rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.4rem 0.84375rem;
    border-radius: 0 .107rem .107rem 0;
    flex-grow: 1;
    color: #3a8cde;
    font-size: 0.32rem
  }
  .containerLeft {
    width: 2.9333rem;
    height: 1.40625rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #3B8CE7;
    font-size: .373rem
  }

  .costListDiv {
    width: 100%;
  }

  .costListFoot {
    margin: 0.4rem .4rem .2rem .4rem;
    background: #ffad10;
    border-radius: .107rem;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .allCostTitle {
    height: 1.08rem;
    width: 100%;
    line-height: 1.34375rem;
    font-size: .4rem;
    color: #fff;
  }

  .allCostNumber {
    height: 0.89rem;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #ffad10;
    border-top: 0;
    border-radius:0 0 .107rem .107rem
  }

  .allCostNumber label {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .allCostNumber .a {
    margin-left: .04rem;
    border-radius: 0 0 0 .107rem;
    color: #ffad10;
    flex-grow: 1;
  }

  .allCostNumber .b {
    margin-right: .04rem;
    border-radius: 0 0 .107rem 0;
    color: #ffad10;
    flex-grow: 1;
  }
.costIcon{
  width: .02rem;
    height: .653rem;
    background: #ffad10;
}
  .orderNum {
    background: #3B8CE7;
    display: flex;
    color: #fff;
    justify-content: space-between;
    padding: 0 4.73rem .2rem .4rem;
    align-items: center;
  }

  .orderState {
    color: #1d6dc7;
    background-image: url('../../../../static/images/cost/status.png');
    font-size: .24rem;
    background-size: 100% 100%;
    height: .427rem;
    width: .96rem;
    display: flex;
    align-items: center;
    justify-content: center
  }


  .site_wrap {
    display: flex;
    display: -webkit-flex;
    color: white;
    justify-content: space-between;
    margin-top: 0.02rem;
    padding: 0 .27rem 0;
  }

  .site_wrap .left,
  .site_wrap .right {
    width: 2rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center
  }

  .site_wrap .right {
    width: 2rem;
  }

  .site_wrap .center {
    width: 5.4rem;
    display: flex;
    flex-direction: column;
  }

  .site_wrap .center .bar {
    width: 100%;
  }

  .site_wrap .center .customer_name {
    height: 0.5rem;
    line-height: 0.5rem;
  }

  .site_wrap .center .require_time_to {
    height: 0.7rem;
    line-height: 0.7rem;
  }

  .toOtherBtn {
    display: flex;
    display: -webkit-flex;
    padding: 0 .4rem .7rem;
    justify-content: space-between;
  }

  .toOtherBtn a {
    width: 3.73rem;
    height: 1.16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
  }

  .toOpera {
    border: 1px solid #4489d6;
    border-radius: .107rem;
    color: #4489d6
  }

  .toCost {
    border: 1px solid #59b803;
    border-radius: .107rem;
    color: #59b803
  }

</style>
